<template>
  <div class="app-container" style="text-align: center">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>本月新增扫码会员</span>
          </div>
          <h1>
            {{data.month_user}}
          </h1>
        </el-card>

      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>累计扫码会员</span>
          </div>
          <h1>
             {{data.total_user}}
          </h1>
        </el-card>

      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>本月发放红包金额（元）</span>
          </div>
          <h1>
             {{data.month_redpack}}
          </h1>
        </el-card>

      </el-col>

      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>本月抽奖活动兑换金额（元）</span>
          </div>
          <h1>
             {{data.month_tobalance}}
          </h1>
        </el-card>

      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>本月抽奖活动实物奖品中奖数</span>
          </div>
          <h1>
             {{data.month_realprize}}
          </h1>
        </el-card>

      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>累计发放红包金额（元）</span>
          </div>
          <h1>
            {{data.total_redpack}}
          </h1>
        </el-card>

      </el-col>

      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>累计抽奖活动兑换金额（元）</span>
          </div>
          <h1>
            {{data.total_tobalance}}
          </h1>
        </el-card>

      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>累计抽奖活动实物奖品中奖数</span>
          </div>
          <h1>
            {{data.total_realprize}}
          </h1>
        </el-card>

      </el-col>
    </el-row>

  </div>

</template>

<script>
  import { getHome } from '../../api/home'

  export default {
    name: 'Dashboard',
    data() {
      return {
        data: {}
      }
    },
    created() {
      this.getHome()
    },
    methods: {
      async getHome() {
        const res = await getHome()
        this.data = res.data
      }
    }
  }
</script>

<style>
  .topTitle {
    margin-bottom: 20px;
  }

  .static b {
    color: #20a0ff;
  }
</style>
